<template>
  <div class="home-container">
    <el-card class="welcome-card">
      <h2>欢迎使用学生档案管理系统</h2>
      <p>您好，{{ userStore.userInfo?.realName }}（{{ userStore.userInfo?.roleName }}）</p>
    </el-card>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <el-icon class="stats-icon" :size="40" color="#409EFF"><User /></el-icon>
            <div class="stats-info">
              <div class="stats-value">{{ statistics?.totalStudents || 0 }}</div>
              <div class="stats-label">学生总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <el-icon class="stats-icon" :size="40" color="#67C23A"><School /></el-icon>
            <div class="stats-info">
              <div class="stats-value">{{ statistics?.totalClasses || 0 }}</div>
              <div class="stats-label">班级总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <el-icon class="stats-icon" :size="40" color="#E6A23C"><OfficeBuilding /></el-icon>
            <div class="stats-info">
              <div class="stats-value">{{ statistics?.totalDepts || 0 }}</div>
              <div class="stats-label">院系总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <el-icon class="stats-icon" :size="40" color="#F56C6C"><Reading /></el-icon>
            <div class="stats-info">
              <div class="stats-value">{{ statistics?.totalScores || 0 }}</div>
              <div class="stats-label">成绩记录</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>院系学生分布</span>
          </template>
          <div ref="deptChartRef" style="height: 350px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>成绩分布</span>
          </template>
          <div ref="scoreChartRef" style="height: 350px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-row" style="margin-top: 20px">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>性别分布</span>
          </template>
          <div ref="genderChartRef" style="height: 350px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>班级学生人数（Top 10）</span>
          </template>
          <div ref="classChartRef" style="height: 350px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useUserStore } from '@/store/user'
import { getStatistics, type StatisticsData } from '@/api/statistics'
import * as echarts from 'echarts'
import type { EChartsOption } from 'echarts'

const userStore = useUserStore()
const statistics = ref<StatisticsData>()

const deptChartRef = ref<HTMLDivElement>()
const scoreChartRef = ref<HTMLDivElement>()
const genderChartRef = ref<HTMLDivElement>()
const classChartRef = ref<HTMLDivElement>()

// 获取统计数据
const loadStatistics = async () => {
  try {
    const data = await getStatistics()
    statistics.value = data
    
    await nextTick()
    initCharts()
  } catch (error) {
    console.error('获取统计数据失败', error)
  }
}

// 初始化图表
const initCharts = () => {
  if (!statistics.value) return

  // 院系学生分布 - 饼图
  if (deptChartRef.value) {
    const deptChart = echarts.init(deptChartRef.value)
    const deptOption: EChartsOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          type: 'pie',
          radius: '65%',
          data: statistics.value.studentsByDept,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    deptChart.setOption(deptOption)
  }

  // 成绩分布 - 柱状图
  if (scoreChartRef.value) {
    const scoreChart = echarts.init(scoreChartRef.value)
    const scoreData = statistics.value.scoreDistribution
    const scoreOption: EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: ['优秀', '良好', '及格', '不及格']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: [
            { value: scoreData['优秀'], itemStyle: { color: '#67C23A' } },
            { value: scoreData['良好'], itemStyle: { color: '#409EFF' } },
            { value: scoreData['及格'], itemStyle: { color: '#E6A23C' } },
            { value: scoreData['不及格'], itemStyle: { color: '#F56C6C' } }
          ],
          barWidth: '50%'
        }
      ]
    }
    scoreChart.setOption(scoreOption)
  }

  // 性别分布 - 饼图
  if (genderChartRef.value) {
    const genderChart = echarts.init(genderChartRef.value)
    const genderData = statistics.value.genderDistribution
    const genderOption: EChartsOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          data: [
            { value: genderData['男'], name: '男', itemStyle: { color: '#409EFF' } },
            { value: genderData['女'], name: '女', itemStyle: { color: '#F56C6C' } }
          ]
        }
      ]
    }
    genderChart.setOption(genderOption)
  }

  // 班级学生人数 - 横向柱状图
  if (classChartRef.value) {
    const classChart = echarts.init(classChartRef.value)
    const classData = statistics.value.studentsByClass
    const classOption: EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: classData.map(item => item.name)
      },
      series: [
        {
          type: 'bar',
          data: classData.map(item => item.value),
          itemStyle: {
            color: '#67C23A'
          }
        }
      ]
    }
    classChart.setOption(classOption)
  }
}

onMounted(() => {
  loadStatistics()
})
</script>

<style scoped lang="scss">
.home-container {
  .welcome-card {
    margin-bottom: 20px;
    
    h2 {
      margin: 0 0 10px;
      font-size: 24px;
      color: #333;
    }
    
    p {
      margin: 0;
      font-size: 14px;
      color: #666;
    }
  }
  
  .stats-row {
    .stats-card {
      .stats-content {
        display: flex;
        align-items: center;
        gap: 20px;
        
        .stats-icon {
          flex-shrink: 0;
        }
        
        .stats-info {
          .stats-value {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
          }
          
          .stats-label {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
}
</style>

